<template>
  <div class="container">
    <div class="container_up">
      <div class="container_up_item">
        <div class="container_up_item_label">下发日期：</div>
        <div class="container_up_item_data">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="Pick a day"
          />
        </div>
      </div>
      <div class="container_up_item">
        <el-button type="primary" @click="showMessage">搜索</el-button>
        <el-popover
          placement="top-start"
          title="这是标题详细文字这是标题详细文字"
          :width="392"
          trigger="click"
          content="通过数字化一体管理手段，打造核心服务能力清单，覆盖工单服务。"
        >
          <template #reference>
            <el-button type="info">重置</el-button>
          </template>
        </el-popover>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="Top Left prompts info"
          placement="top-start"
        >
          <el-button>top-start</el-button>
        </el-tooltip>
        <el-popconfirm
          title="您确定执行删除操作？"
          cancel-button-type="info"
        >
          <template #reference>
            <el-button>Delete</el-button>
          </template>
        </el-popconfirm>
        <el-input-number v-model="num" :step="2" />
      </div>
    </div>
    <div class="container_down">
      <div class="container_down_content">
        <div class="container_down_content_table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </div>
        <div class="container_down_content_pagination">
          <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[100, 200, 300, 400]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
const num = ref(5)
const value1 = ref('')
const pageNum = ref(1)
const pageSize = ref(10)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
import {useRouter} from "vue-router";
const router = useRouter()
const showMessage = () => {
  // ElMessage.info({
  //   message:'这是一个信息提示弹窗这是一个信息提示弹窗这是一个信息提示弹窗这是一个信息提示弹窗这是一个信息提示弹窗这是一个信息提示弹窗这是一个信息提示弹窗这是一个信息提示弹窗这是一个信息提示弹窗',
  //   duration:0,
  //   showClose:true
  // })
  window.location.href = window.location.origin + '/homeView'
  // console.log(window.location.origin + '/homeView');
}
</script>
<style scoped lang="scss">
.container{
  height:100vh;
  background: #f1f1f1;
  display: flex;
  flex-direction: column;
  &_up{
    background: #ffffff;
    padding:10px;
    display: flex;
    flex-wrap: wrap;
    &_item{
      align-items: center;
      display: flex;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
  &_down{
    flex:1;
    padding:10px;
    overflow: hidden;
    &_content{
      height: 100%;
      background: #ffffff;
      &_table{
        height: calc(100% - 50px);
        ::v-deep(.el-table){
          height: 100%;
        }
      }
      &_pagination{
        height:50px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
      }
    }
  }
}
</style>